<html>
<head>
	<!-- Locks Web-Kit down on iPhone and Android, setting the
		  initial view to occupy the entire screen and not allowing
		  the user to scale the viewport. -->
	<meta name="viewport" content="width=320; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"/>

	<!-- jQuery lite (JQLite) -->
	<script src="jqlite.1.0.5.js" type="text/javascript"></script>


	<style type="text/css">
		body {
			font: 10pt Arial,Helvetica,Sans-serif;
			margin-left: 5px;
			margin-right: 5px;
		}

		div.spacer {
			height: 15px;
		}

		div.button {
			font-weight: bold;
			background-color: silver;
			border: 1px solid gray;
			width: 90px;
			height: 25px;
			text-align: center;
			padding-top: 5px;
			cursor: pointer;
			-moz-border-radius: 1em;
			-webkit-border-radius: 1em;
		}

		span.jqlink.red {
			background-color: red;
			color: white;
		}

		.bold {
			font-weight: bold;
		}

		p.hidden {
			display: none;
		}
	</style>

	<script type="text/javascript">
		<!-- Testing jQLite support -->
		var calls = 0, startTime = 0, left = 95;
		$(document).ready(function() {

			$("div.button.jq").click(function() {
				$("span.jqlink").toggleClass("red");
			});

			$("div.multi span.hilite").css({
				border: "2px dashed blue",
				fontWeight: "bold"
			});

			$("div.button.hideshow").click(function() {
				$("p.jqhideshow").toggleClass("hidden");
			});

			$("div.button.show").click(function() {
				$("p.jqshow").show(function() {
					alert("now showing!");
				});
			});

			$(".spacer").css("borderBottom", "2px dotted green");
		});

	</script>

</head>
<body>

	<h1>Using jQLite</h1>

	<h2>Simple jQLite DOM Manipulations</h2>
	<p>
		With jQLite, you can control the DOM, even on the BlackBerry mobile device.
		<span id="jqlink" class="jqlink">Manipulate the DOM by adjusting classes and setting up event
		handlers.</span>
	</p>
	<div class="button jq">
		jQuery
	</div>
	<div class="spacer">&nbsp;</div>

	<h2>Multiple Selectors</h2>
	<div class="multi">
		It is possible to utilize some of the capabilities of jQuery in jQLite, setting the styles
		<span class="hilite">of multiple elements</span> that have the same class name
		<span class="hilite">within the page.</span>
	</div>

	<div class="spacer">&nbsp</div>

	<h2>Toggling of Classes</h2>
	<div class="button hideshow">
		Toggle
	</div>
	<p class="jqhideshow hidden">
		If you can see this, then you were able to toggle the visibility of the
		paragraph.  Touch the button again to make it disappear...
	</p>

	<div class="spacer">&nbsp;</div>

	<h2>Show and Hide with Callback</h2>
	<div class="button show">
		Show
	</div>
	<p class="jqshow hidden">
		If you can see this, then you were able to show the
		paragraph.
	</p>
</body>
</html>
